<template>
  <div class="EmoticonListCover" v-if="Show" @click="OpenEmotion(false)">
    <div class="EmoticonList">
      <span v-for="(item,ket) in listA" :key="ket" v-html="$utils.parsingEmoji('['+ket+']')" @click="ClickEmoticon('['+ket+']')"></span>
    </div>
  </div>
</template>

<script>
// 引入表情包数据
import emojdata from '@/util/emjoydata'
export default {
  data () {
    return {
      Show: false,
      listA: emojdata.emojisAmap

    }
  },
  methods: {
    // 选中表情
    ClickEmoticon (key) {
      const That = this
      That.Show = false
      That.$emit(
        'AppendInputValue',
        key
      )
    },
    OpenEmotion (Value) {
      this.Show = Value
    }
  }
}
</script>
<style lang="scss" scoped>
.EmoticonListCover {
  z-index: 1010;
  position: absolute;
  padding: 20px;
  width: 250px;
  height: 200px;

  border-radius: 6px;
   box-shadow: 5px 5px 3px #dbdbdb ,-5px -5px 3px #eeeeee;
  background: #fff;
  .EmoticonList {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    .PicItem {
      img {
        padding: 2.5px;
        background:#fff;
        display: block;
        cursor: pointer;
      }
    }
  }
}
</style>
